<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-input v-model="pagination.realname" placeholder="通过下单者名字进行查找" style="width: 200px;"
                prefix-icon="el-icon-search"
                @keyup.enter.native="loadPost"></el-input>
      <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
    </div>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(255,255,255)',color:'#000000'}"
        style="text-align: center"
        border="">
      <el-table-column
          prop="id"
          label="订单编号"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="openid"
          label="下单者唯一凭证"
          width="250px">
      </el-table-column>
      <el-table-column
          prop="realname"
          label="下单者名字"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="computername"
          label="电脑型号"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="repairid"
          label="接单者id"
          width="250px">
      </el-table-column>
      <el-table-column
          prop="name"
          label="接单者名字"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="state"
          label="订单状态"
          width="">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.tag === '1' ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.state === 1 ? '待接单' : '已结单' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="pagination"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10,20]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "repair",
  data() {
    return {
      tableData: [],
      total: 0,
      realname: '',
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        //以下用于查询
        realname: ''
      },
    }
  },
  mounted() {
    this.loadPost()
  },
  methods: {
    loadPost() {
      //组织参数，拼接url请求地址
      let param = "?realname=" + this.pagination.realname
      console.log(param)
      //发送异步请求到controller
      this.$axios.get(this.$httpUrls + "/repairtable/" + this.pagination.currentPage + "/" + this.pagination.pageSize + param).then((res) => {
        console.log(res)
        this.pagination.pageSize = res.data.data.size;
        this.pagination.currentPage = res.data.data.current;
        this.pagination.total = res.data.data.total;
        this.tableData = res.data.data.records
      })
    },
    sizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pagination.pageSize = size;
      this.getAll();
    },
    currentChange(page) {
      console.log(`当前页: ${page}`);
      this.pagination.currentPage = page;
      this.getAll();
    },
    /*    reset() {
          this.realname = ''

        }*/
  },
}
</script>

<style scoped>

</style>